import React, { useState, useEffect } from 'react';
import { Column } from '@ant-design/charts';
import { connect } from 'dva';
import './DashBoardPage.css';

const DashBoardPage = ({ dispatch, statusList }) => {

  useEffect(() => {
    dispatch({
      type: 'status/getStatusList'
    });
  })

  var config = {
    data: statusList,
    isStack: true,
    xField: 'group',
    yField: 'value',
    seriesField: 'type',
    columnWidthRatio: 0.2,
    label: {
        position: 'middle',
        layout: [
            { type: 'interval-adjust-position' },
            { type: 'interval-hide-overlap' },
            { type: 'adjust-color' }
        ]
    },
    colorField: 'type',
    color: ({ type }) => {
    if(type === '非常忙'){
      return '#B71C1C';

    } else if (type === '忙') {
      return '#EF5350';

    } else if (type === '正常') {
      return '#FFEB3B';
    }
    return '#66BB6A';
  }
  };

  return <Column {...config} />;
};

export default connect(state => {
  const { statusList } = state.status;
  return {
    statusList
  }
})(DashBoardPage);
